<template>
	<div class="hotRecommend">
		<!-- hot-nav -->
		<div class="navBg nav align-items-center">
			<a href="#" class="me-4">热门推荐</a>
			<div class="navUl">
				<a href="#">华语</a><span>|</span>
				<a href="#">流行</a><span>|</span>
				<a href="#">摇滚</a><span>|</span>
				<a href="#">民谣</a><span>|</span>
				<a href="#">电子</a>
			</div>
			<span class="more">
				<a href="#">更多</a>
				<i>&nbsp;</i>
			</span>
		</div>
		<!-- hot-data -->
		<div class="dataBox">
			<div class="row justify-content-around">
				<div class="col-3" v-for="(item,index) in hotData.hotList" :key="index">
					<div class="onImg position-relative">
						<img :src="item.songList" class="img-fluid">
						<a href="#" :title="item.details" class="imgMsk"></a>
						<div class="blackMask d-flex align-items-center">
							<span class="music"></span>
							<span class="flow mt-1">{{item.popularity}}</span>
							<a href="#" class="icon-play" title="播放"></a>
						</div>
					</div>
					<div class="onWard">
						<i class="isTvshow" v-if="item.isTvShow"></i>
						{{item.details}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {onMounted,reactive} from 'vue'
	import axios from "axios"
	const hotData=reactive({
		hotList:'',
	})
	onMounted(()=>{
		axios.get(`https://mock.apifox.cn/m1/2897896-0-default/hotRecommend`)
		.then(function (response) {
			hotData.hotList=response.data.hotData
			// console.log(hotData.hotList)
		})
	})
</script>

<style scoped>
	/* 热门推荐 */
	.navBg,.more i{
		background: url('../assets/hotImg/index.png') no-repeat;
	}
	.navBg{
		height: 33px;
		padding: 0 10px 0 34px;
		position: relative;
		border-bottom: 2px solid #C10D0C;
		background-position: -225px -156px;
	}
	.navBg a{
		font-size: 20px;
		color: #333;
	}
	a{
		text-decoration: none;
	}
	.navUl a,.more a{
		color: #666;
		font-size: 12px
	}
	.navUl span{
		margin: 0 10px;
		color: #ccc;
	}
	.navUl a:hover,.more a:hover,.onWard:hover{
		text-decoration: underline;
	}
	.more{
		position: absolute;
		right: 12px;
	}
	.more i{
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-left: 4px;
		vertical-align: middle;
		background-position: 0 -240px;
	}
	/* data */
	.dataBox{
		padding: 0;
		margin-top: 20px;
		padding-bottom: 30px;
	}
	.onWard{
		margin: 8px 0 3px;
		font-size: 14px;
		color: #000;
		cursor: pointer;
	}
	.isTvshow{
		background: url('../assets/hotImg/icon.png');
	}
	.isTvshow{
		display: inline-block;
		width: 35px;
		height: 15px;
		position: relative;
		top: 2px;
		background-position: -31px -658px;
	}
	.col-3{
		width: 23%;
	}
	/* 黑色遮罩 */
	.blackMask,.imgMsk{
		background: url('../assets/new/coverall.png');
	}
	.blackMask{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 27px;
		background-position: 0 -537px;
		color: #ccc;
		font-size: 12px
	}
	.music,.icon-play{
		background: url('../assets/hotImg/iconall.png');
	}
	.music{
		display: inline-block;
		width: 14px;
		height: 11px;
		background-position: 0 -24px;
		margin: 9px 5px 9px 10px;
	}
	.icon-play{
		display: inline-block;
		width: 16px;
		height: 17px;
		background-position: 0 0;
		position: absolute;
		right: 10px;
		bottom: 5px;
	}
	.imgMsk{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: 0 0;
	}
	.icon-play:hover{
		background-position: 0 -60px;
	}
</style>